import React, { Component } from 'react'
import {
  View,
  StyleSheet,
  ScrollView,
  Image,
  Text,
  TouchableOpacity,
  ImageBackground
} from 'react-native'

import NavBar from '../../../components/PublicHeader';

export default class openMembershipRights extends Component {
  constructor(props) {
    super(props)
    this.state = {
      // 开通会员权益
      openMemberTitle: "开通会员权益",
      // 同意协议默认值
      selectedStatus: false,
      // 默认选中状态
      defaultState: require('../../../assets/images/iconResources/defaultSelectedState.png'),
      // 已选中状态
      selectedStatusa: require('../../../assets/images/socialcircle/selectedStatus.png'),
      // 背景图片
      openMemberBg: require('../../../assets/images/iconResources/openMembershipRightsBg.png'),
      // 开通会员模拟数据列表
      openMembershipRights: [
        {
          // 会员卡片背景
          membershipCardBg: require('../../../assets/images/iconResources/membershipCardBg.png'),
          // 用户头像
          userPortrait: require('../../../assets/images/iconResources/unsplash_D8iZPlX-2fs.png'),
          // 用户名称
          userTitle: "何某某",
          // 开通后详情描述
          memberDescription: "开通会员获取更多流量",
        },
        {
          membershipCardBg: require('../../../assets/images/iconResources/membershipCardBg.png'),
          userPortrait: require('../../../assets/images/iconResources/unsplash_D8iZPlX-2fs.png'),
          userTitle: "何某某",
          memberDescription: "开通会员获取更多流量",
        },
        {
          membershipCardBg: require('../../../assets/images/iconResources/membershipCardBg.png'),
          userPortrait: require('../../../assets/images/iconResources/unsplash_D8iZPlX-2fs.png'),
          userTitle: "何某某",
          memberDescription: "开通会员获取更多流量",
        }
      ],
      // 会员功能列表
      membershipFnWarper: [
        {
          // 功能图标
          membershipFnIcon: require('../../../assets/images/iconResources/flowSupport.png'),
          // 功能标题
          membershipFnText: "流量扶持"
        },
        {
          membershipFnIcon: require('../../../assets/images/iconResources/headRowDisplay.png'),
          membershipFnText: "头排展示"
        },

        {
          membershipFnIcon: require('../../../assets/images/iconResources/footstepBrowsing.png'),
          membershipFnText: "足迹浏览"
        },
        {
          membershipFnIcon: require('../../../assets/images/iconResources/businessCardReplacement.png'),
          membershipFnText: "名片更换 "
        },
      ],
      // 选择会员套餐
      selectMemberPackage: {
        // 标题
        selectMemberText: "选择会员套餐",
        // 价格列表
        selectMemberItem: [
          {
            // 月数
            selectMemberMonths: "1个月",
            // 价格
            selectMemberPrice: "15",
            // 单个充值会员描述
            selectMemberDescribe: "新人专享优惠",
            // 选中状态
            selectedStatus: true
          },
          {
            selectMemberMonths: "1个月",
            selectMemberPrice: "98",
            selectMemberDescribe: "季卡",
            selectedStatus: false
          },
          {
            selectMemberMonths: "1个月",
            selectMemberPrice: "127",
            selectMemberDescribe: "月卡",
            selectedStatus: false
          },
          {
            selectMemberMonths: "12个月",
            selectMemberPrice: "127",
            selectMemberDescribe: "新人专享优惠",
            selectedStatus: false
          }
        ]
      }
    }
  }
  componentDidMount = () => {


  }

  // 会员价格区修改选中状态
  SelectMemberPackageItem(index) {
    const {
      selectMemberPackage
    } = this.state
    const selectMemberItem = selectMemberPackage.selectMemberItem
    selectMemberItem.map((item, selectMemberPackageIndex) => {
      this.setState({
        selectedStatus: item.selectedStatus = false
      })
      if (index == selectMemberPackageIndex) {
        this.setState({
          selectedStatus: item.selectedStatus = !item.selectedStatus
        })
      }
    })
  }

  render() {
    const {
      selectedStatus,
      selectedStatusa,
      defaultSelectedState,
      openMembershipRights,
      membershipFnWarper,
      selectMemberPackage,
      headerRightImage,
      openMemberTitle,
      openMemberBg
    } = this.state
    {/* 会员展示卡片 类型 */ }
    const OpenMembershipRights =
      <ScrollView showsHorizontalScrollIndicator={false}
        horizontal={true} style={styles.scrollViewBox}>
        {openMembershipRights.map((item, index) => (
          <View style={styles.shipCardItem} key={index}>
            <ImageBackground style={styles.membershipCardBg}
              source={item.membershipCardBg}>
              <View style={styles.userInfoWarper}>
                <View style={styles.shipCardInfo}>
                  <Image style={styles.userPortrait}
                    source={item.userPortrait} />
                  <View>
                    <Text style={styles.userTitle}>{item.userTitle}</Text>
                    <Text style={styles.memberDescription}>
                      {item.memberDescription}
                    </Text>
                  </View>
                </View>
              </View>
            </ImageBackground>
          </View>
        ))}
      </ScrollView>
    {/* 功能列表 */ }
    const MembershipFnWarper =
      <ScrollView showsHorizontalScrollIndicator={false}
        horizontal={true} style={styles.scrollViewBox}>
        <View style={styles.membershipFnWarper}>
          {membershipFnWarper.map((item, index) => (
            <View style={styles.membershipFnItem} key={index}>
              <View style={styles.shipColumnFnItem}>
                <Image style={styles.membershipFnIcon}
                  source={item.membershipFnIcon} />
                <Text style={styles.membershipFnText}>
                  {item.membershipFnText}
                </Text>
              </View>
            </View>
          ))}
        </View>
      </ScrollView>
    {/* 选择会员套餐 */ }
    const SelectMemberPackage =
      <View style={styles.selectMemberPackage}>
        <View>
          <Text style={styles.selectMemberText}>
            {selectMemberPackage.selectMemberText}
          </Text>
        </View>
        <View>
          <ScrollView showsHorizontalScrollIndicator={false}
            horizontal={true}>
            {selectMemberPackage.selectMemberItem.map((item, index) => (
              <View style={styles.selectMemberPackageBox} key={index}>
                <TouchableOpacity onPress={() => {
                  this.SelectMemberPackageItem(index)
                }}>
                  {/* 单个价格区 */}
                  <View style={item.selectedStatus ?
                    styles.PackageItemAction :
                    styles.PackageItemActionNo} >
                    <View>
                      <Text style={item.selectedStatus ?
                        styles.PackageMonthsAction :
                        styles.PackageMonthsActionNo} >{item.selectMemberMonths}</Text>
                    </View>
                    <View style={styles.selectMemberPackagePriceBox}>
                      <Text style={item.selectedStatus ?
                        styles.priceCompanyAction :
                        styles.priceCompanyActionNo}>￥</Text>
                      <Text style={item.selectedStatus ?
                        styles.PackagePriceAction :
                        styles.PackagePriceActionNo}>{item.selectMemberPrice}</Text>
                    </View>
                    <View>
                      <Text style={item.selectedStatus ?
                        styles.PackageDescribeAction :
                        styles.PackageDescribeActionNo}>{item.selectMemberDescribe}</Text>
                    </View>
                  </View>
                </TouchableOpacity>
              </View>
            ))}
          </ScrollView>
        </View>
        {/* 已阅并同意协议区 */}
        <View style={styles.agreedToRead}>
          <TouchableOpacity onPress={() => {
            this.setState({
              selectedStatus: !this.state.selectedStatus
            })
          }}>
            {selectedStatus ?
              <Image style={styles.selectedStatusStyle}
                source={selectedStatusa} /> :
              <Image style={styles.selectedStatusStyle}
                source={defaultSelectedState} />
            }
          </TouchableOpacity>
          <View style={styles.sgreedToReadCntent}>
            <Text>已阅并同意</Text>
            <Text style={styles.memberServiceColor}>《会员服务协议》</Text>
            <Text style={styles.memberServiceColor}>《自动续费协议》</Text>
          </View>
        </View>
        {/* 来通按钮 */}
        <TouchableOpacity onPress={() => {
        }}>
          <View style={styles.openMemberBtn}>
            <Text style={styles.shipRightsTextBtn}>立即开通</Text>
          </View>
        </TouchableOpacity>
      </View>
    return (
      <View style={styles.warper}>
        <ImageBackground style={styles.openMembershipRightsBg}
          source={openMemberBg}>
          {/* 导航栏 */}
          <NavBar
            navigation={this.props.navigation}
            title={openMemberTitle}
            rightImage={headerRightImage}
            // hideLeftArrow={false}
            backgroundColor={"transparent"}
            titleColor={"#fff"}
          />
          <ScrollView>
            <View style={styles.membershipRightsExhibition}>
              <View>
                {/* 会员展示卡片 类型 */}
                {OpenMembershipRights}
                {/* 功能列表 */}
                {MembershipFnWarper}
              </View>
              {/* 选择会员套餐 */}
              {SelectMemberPackage}
            </View>
          </ScrollView>
        </ImageBackground>
      </View >
    )
  }
}


const styles = StyleSheet.create({
  openMembershipRightsBg: {
    width: "100%",
    height: "100%"
  },

  scrollViewBox: {
    marginTop: 30,
    flex: 1
  },
  shipCardItem: {
    marginRight: 10,
    marginLeft: 15,
  },
  membershipCardBg: {
    width: 296,
    height: 105,
  },
  userInfoWarper: {
    paddingLeft: 20,
    height: "100%",
    justifyContent: "center",

  },
  shipCardInfo: {
    flexDirection: "row",
    alignItems: "center"
  },
  userPortrait: {
    borderWidth: 2,
    borderColor: "#DBB062",
    width: 50,
    height: 50,
    borderRadius: 50,
    marginRight: 15
  },
  userTitle: {
    color: "#A3731E",
    fontSize: 20,
    marginBottom: 5,
    fontWeight: "700"
  },
  memberDescription: {
    color: "#B2842E",
    fontSize: 15
  },
  membershipFnWarper: {
    flex: 1,
    paddingLeft: 15,
    paddingRight: 15,
    marginBottom: 30,
    flexDirection: "row",
  },
  membershipFnItem: {
    marginRight: 25,
    marginLeft: 20,
    flexDirection: "row",
    alignItems: "center"
  },
  shipColumnFnItem: {
    alignItems: "center",
    flexDirection: "column",
    justifyContent: "space-around"
  },
  membershipFnIcon: {
    width: 35,
    height: 35,
    marginBottom: 10
  },
  membershipFnText: {
    color: "#fff",
    fontSize: 12
  },
  selectMemberPackage: {
    flex: 1,
    padding: 20,
    backgroundColor: "#fff",
    borderTopRightRadius: 10,
    borderTopLeftRadius: 10
  },
  selectMemberText: {
    color: "#333",
    fontSize: 18
  },
  selectMemberPackageBox: {
    marginTop: 22,
    flexDirection: "row",
    justifyContent: "space-around"
  },
  PackageItemActionNo: {
    marginRight: 10,
    marginLeft: 10,
    flexDirection: "column",
    justifyContent: "space-evenly",
    alignItems: "center",
    width: 105,
    height: 133,
    backgroundColor: "#F8F8F8",
    borderWidth: 1,
    borderColor: "#EDEDED",
    borderRadius: 10,

  },
  PackageItemAction: {
    marginRight: 10,
    marginLeft: 10,
    flexDirection: "column",
    justifyContent: "space-evenly",
    alignItems: "center",
    width: 105,
    height: 133,
    // backgroundColor: "#F8F8F8",
    borderColor: "#E3CDA3",
    backgroundColor: "#FCF4EC",
    borderWidth: 1,
    // borderColor: "#EDEDED",
    borderRadius: 10,

  },
  PackageMonthsAction: {
    color: "#D4A344",
    fontSize: 16
  },
  PackageMonthsActionNo: {
    color: "#000000",
    fontSize: 16
  },
  selectMemberPackagePriceBox: {
    flexDirection: "row",
    alignItems: "center",
  },
  priceCompanyAction: {
    color: "#A47822",
    fontSize: 13,
    fontWeight: "700"
  },
  priceCompanyActionNo: {
    color: "#D4A344",
    fontSize: 13,
    fontWeight: "700"
  },
  PackagePriceAction: {
    color: "#A47822",
    fontSize: 26,
    fontWeight: "700"
  },
  PackagePriceActionNo: {
    color: "#D4A344",
    fontSize: 26,
    fontWeight: "700"
  },
  PackageDescribeAction: {
    color: "#E9BA5F",
    fontSize: 13
  },
  PackageDescribeActionNo: {
    color: "#888888",
    fontSize: 13
  },
  agreedToRead: {
    flexDirection: "row",
    alignItems: "center",
    marginTop: 30
  },
  selectedStatusStyle: {
    width: 16,
    height: 16,
    marginRight: 8
  },
  sgreedToReadCntent: {
    flexDirection: "row"
  },
  memberServiceColor: {
    color: "#E9BA5F",
    fontSize: 13
  },
  openMemberBtn: {
    marginTop: 60,
    marginBottom: 40,
    width: "100%",
    justifyContent: "center",
    alignItems: "center",
    height: 40,
    backgroundColor: "#E9C785",
    borderRadius: 40
  },
  shipRightsTextBtn: {
    color: "#A47822",
    fontSize: 18
  },
})